<template>
  <div class="clbox">
    <!-- 分步1 电脑工作站打开 -->
    <div class="dnbjbox" v-if="mktaskid == 1">
      <!-- 背景 -->
      <img src="@/images/dnbj.png" alt="" class="dnbjimg" />
      <!-- '点击框' -->
      <div class="dnbnbox tymb" @click="mktaskid = 2"></div>
    </div>
    <!-- 分2 -->
    <div class="dnbjbox" v-if="mktaskid != 6">
      <!-- 背景 -->
      <img
        src="@/images/mkgz1.png"
        alt=""
        class="dnbjimg"
        v-if="mktaskid == 2"
      />
      <!-- 按钮点击file -->
      <div class="fileop tymb" @click="mktaskid = 3" v-if="mktaskid == 2"></div>

      <!-- 分mk3 -->
      <!-- 背景    -->
      <img
        src="@/images/mkgz2.png"
        alt=""
        class="dnbjimg"
        v-if="mktaskid == 3"
      />
      <!-- 按钮点击file -->
      <div class="mkopen tymb" @click="mktaskid = 4" v-if="mktaskid == 3"></div>

      <!-- 分模块4 -->
      <img
        src="@/images/mkgz3.png"
        alt=""
        class="dnbjimg"
        v-if="mktaskid == 4"
      />
      <!-- 选择栏目 -->
      <div
        class="xinchoice tymb"
        @click="mktaskid = 5"
        v-if="mktaskid == 4"
      ></div>

      <!-- 分模块5 -->
      <img
        src="@/images/mkgz4.png"
        alt=""
        class="dnbjimg"
        v-if="mktaskid == 5"
      />
      <!-- 选择栏目 -->
      <div
        class="xinchoice2 tymb"
        @click="mktaskid = 6"
        v-if="mktaskid == 5"
      ></div>
    </div>
    <!-- 获取图像数值 -->
    <div class="dnbjbox" v-if="mktaskid == 6">
      <!-- 背景 -->
      <img src="@/images/mkgz5.png" alt="" class="dnbjimg" />
      <!-- 列表图片 -->
      <div class="liebox">
        <!-- 列表 -->
        <div
          @click="lieitemfn(item.id)"
          class="lieitem"
          v-for="item in lieitemdata"
          :ref="'lieitem' + item.id"
          :key="item.id"
          :class="{
            lieitemac: item.id == lieitemid
          }"
        >
          <img src="@/images/1.png" alt="" />
        </div>
      </div>
      <!-- 整体大图 -->
      <div class="yimgbox">
        <!-- 背景 -->
        <img
          :src="lieitemid ? require(`@/images/${lieitemid}.png`) : ''"
          v-if="lieitemid"
          class="yimgitem"
        />

        <!-- 图中roi方框 -->
        <div
          class="roifk tymb"
          v-if="roifkshow"
          @click=";(roifkshow = false), (roifkshowac = true), (annshow = true)"
        ></div>
        <div class="roifkac" v-if="roifkshowac"></div>
        <!-- 图中方框完成 -->
      </div>
      <!-- roi按钮及其选中 -->
      <div
        class="roimkbox tymb"
        @click=";(roiac = true), (roishow = false), (roifkshow = true)"
        v-if="roishow"
      ></div>
      <div class="roimkbox" v-show="roiac">
        <!-- 选中 -->
        <img src="@/images/xzac.png" alt="" />
      </div>
      <!-- roi完成 -->

      <!-- anan -->
      <div
        class="anan tymb"
        v-show="annshow"
        @click=";(annshow = false), (anmove = true)"
      ></div>
      <!-- anan -->
      <!-- 更多菜单 -->
      <div class="anmovebox" v-show="anmove" @click="anmovefn">
        <img src="@/images/anmove.png" alt="" />
        <!-- manns -->
        <div class="manns tymb"></div>
      </div>
      <!-- 右侧记录数值 -->
      <div class="lieszbox">
        <img src="@/images/jlz1.png" alt="" v-show="lieitemidac > 0" />
        <img src="@/images/jlz2.png" alt="" v-show="lieitemidac > 1" />
        <img src="@/images/jlz3.png" alt="" v-show="lieitemidac > 2" />
        <img src="@/images/jlz4.png" alt="" v-show="lieitemidac > 3" />
        <img src="@/images/jlz5.png" alt="" v-show="lieitemidac > 4" />
        <div class="jlbtn" @click="gojlfn" v-if="taskids != 11">记录数值</div>
      </div>
    </div>
    <!-- 提醒框 -->
    <div class="mktipbox" v-if="mktipshow">
      <!-- 关闭 -->
      <img
        src="@/images/closexz.png"
        alt=""
        class="closexzmk"
        @click="mktipshow = false"
      />
      <div class="mktiptile">提示</div>
      <div class="mktipmain">
        <div class="mktipitem1">未获取全部影像 ROI的平均像素值。</div>
        <div class="mktipitem2">未获取全部影像 ROI的平均像素值。</div>
      </div>
    </div>
    <!-- 提醒2 -->
    <div class="mktipbox" v-if="mktipshow2">
      <!-- 关闭 -->
      <img
        src="@/images/closexz.png"
        alt=""
        class="closexzmk"
        @click="mktipshow2 = false"
      />
      <div class="mktiptile">提示</div>
      <div class="mktipmain">
        <div class="mktipitem1">请按照顺序操作</div>
      </div>
    </div>
    <!-- 二级组件 -->
    <JLd
      :taskids="taskids"
      v-if="taskids == 11"
      @jlsfn="jlsfn"
      @openVideo="openVideo"
    />
  </div>
</template>

<script>
import JLd from './jLd.vue'

//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';

export default {
  //import引入的组件需要注入到对象中才能使用
  components: { JLd },
  props: {
    taskids: {
      type: Number
    }
  },
  data() {
    //这里存放数据
    return {
      mktaskid: 1,
      lieitemdata: [
        {
          id: 1
        },
        {
          id: 2
        },
        {
          id: 3
        },
        {
          id: 4
        },
        {
          id: 5
        }
      ],
      lieitemidac: 0,
      lieitemid: 0,
      roishow: false,
      roiac: false,
      annshow: false,
      anmove: false,
      roifkshow: false,
      roifkshowac: false,
      mktipshow: false,
      mktipshow2: false,
      finishedIds: [] // 新增数组用于存储已完成的id
    }
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {
    mktaskid: {
      handler(i) {
        this.$emit('tiptextfn', '')
        if (this.taskids == 11) {
          return
        }
        if (i == 1) {
          this.$emit('tiptextfn', '打开像素值测量系统')
        }
        if (i == 2) {
          this.$emit('tiptextfn', '点击左上角File选择Open打开DICOM图像')
        }
        if (i == 3) {
          this.$emit('tiptextfn', '点击左上角File选择Open打开DICOM图像')
        }
        if (i == 4) {
          this.$emit('tiptextfn', '点击左上角File选择Open打开DICOM图像')
        }
        if (i == 5) {
          this.$emit('tiptextfn', '点击左上角File选择Open打开DICOM图像')
        }
        if (i == 6) {
          this.$emit('tiptextfn', '点击左侧图像列表，浏览图像')
          this.$nextTick(() => {
            this.$refs.lieitem1[0].classList.add('tymb')
          })
        }
      },
      deep: true,
      immediate: true
    },
    mktipshow: {
      handler(i) {
        if (i) {
          const timer = setTimeout(() => {
            this.mktipshow = false
            clearTimeout(timer)
          }, 1500)
        }
      },
      deep: true,
      immediate: true
    },
    mktipshow2: {
      handler(i) {
        if (i) {
          const timer = setTimeout(() => {
            this.mktipshow2 = false
            clearTimeout(timer)
          }, 1500)
        }
      },
      deep: true,
      immediate: true
    },
    taskids: {
      handler(i) {
        console.log('当前', i)

        if (i == 11) {
          this.lieitemidac = 6
          this.lieitemid = 5
          this.mktaskid = 6
        }
      },
      deep: true,
      immediate: true
    }
  },
  //方法集合
  methods: {
    lieitemfn(id) {
      if (id != this.lieitemidac + 1) {
        // console.log('当前id')
        this.mktipshow2 = true
        return
      }
      this.lieitemid = id
      this.$emit(
        'tiptextfn',
        '在每一幅预处理影像中央选取面积约10 cmX10cm ROI，获取每幅影像 ROI的平均像素值。'
      )

      this.roiac = false
      this.annshow = false
      this.anmove = false
      this.roifkshow = false
      this.roifkshowac = false
      this.roishow = true

      this.$refs[`lieitem${this.lieitemid}`][0].classList.remove('tymb')
    },
    anmovefn() {
      this.anmove = false
      this.lieitemidac = this.lieitemid
      // 只存储一次已完成的id
      if (!this.finishedIds.includes(this.lieitemid)) {
        this.finishedIds.push(this.lieitemid)
      }
      if (this.lieitemid + 1 < 6) {
        // 假设this.$refs.ieitem是一个数组，根据索引获取元素
        this.$refs[`lieitem${this.lieitemid + 1}`][0].classList.add('tymb')
      }
    },
    gojlfn() {
      if (this.finishedIds.length < 5) {
        this.mktipshow = true
      } else {
        this.$emit('clickItem', '跳转到11')
      }
    },
    jlsfn() {
      console.log('二级执行')

      this.$emit('jlsfn')
    },
    openVideo() {
      this.$emit('openVideo')
    }
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {} //如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style scoped>
.clbox {
  position: absolute;
  top: 0px;
  left: 0px;
  height: 100%;
  width: 100%;
}
.dnbjbox {
  position: absolute;
  left: 58%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.dnbjimg {
  width: 1400px;
  height: 720px;
}
.dnbnbox {
  width: 120px;
  height: 120px;

  position: absolute;
  left: 25px;
  bottom: 100px;
}
.fileop {
  width: 90px;
  height: 43px;
  position: absolute;
  left: 0px;
  top: 50px;
}
.mkopen {
  width: 225px;
  height: 25px;
  position: absolute;
  left: 22px;
  top: 135px;
}
.xinchoice {
  width: 655px;
  height: 30px;
  position: absolute;
  left: 440px;
  top: 190px;
}
.xinchoice2 {
  width: 130px;
  height: 33px;
  position: absolute;
  right: 336px;
  bottom: 115px;
}
.liebox {
  width: 120px;
  height: 620px;
  position: absolute;
  top: 97px;
  display: flex;
  flex-direction: column;
  padding: 10px 0;
  box-sizing: border-box;
}
.lieitem {
  width: 100px;
  height: 100px;
  background: #000000;
  border-radius: 0px 0px 0px 0px;
  border: 1px solid transparent;
  margin: 10px auto;
  box-sizing: border-box;
  overflow: hidden;
  cursor: pointer;
}
.lieitem img {
  width: 100px;
  height: 100px;
}
.lieitemac {
  border: 1px solid #279cff;
}
.yimgbox {
  width: 805px;
  height: 569px;

  position: absolute;
  left: 120px;
  top: 151px;
}
.yimgitem {
  width: 572px;
  height: 542px;
  margin: 0 auto;
  display: block;
}
.roimkbox {
  position: absolute;
  top: 104px;
  left: 135px;
  cursor: pointer;
  width: 40px;
  height: 40px;
}
.roimkbox img {
  width: 40px;
  height: 40px;
}
.anan {
  width: 94px;
  height: 46px;
  position: absolute;
  left: 412px;
  top: 49px;
}
.anmovebox {
  position: absolute;
  left: 421px;
  top: 97px;
}
.anmovebox img {
  width: 230px;
  height: 458px;
}
.manns {
  width: 215px;
  height: 26px;

  position: absolute;
  top: 15px;
  left: 7px;
}
.lieszbox {
  width: 475px;
  position: absolute;
  right: 0;
  height: 240px;
  top: 260px;
}
.lieszbox img {
  width: 475px;
  height: 48px;
  display: block;
}
.jlbtn {
  width: 200px;
  height: 60px;
  background: linear-gradient(180deg, #fda260 0%, #f76202 100%);
  border-radius: 8px 8px 8px 8px;
  font-size: 22px;
  color: #ffffff;
  line-height: 55px;
  text-align: center;
  cursor: pointer;
  position: absolute;
  left: 50%;
  bottom: -190px;
  transform: translate(-50%, 0);
}
.roifk {
  width: 80px;
  height: 80px;
  border: 1px dashed #279cff;
  position: absolute;
  left: 355px;
  top: 220px;
}
.roifkac {
  width: 80px;
  height: 80px;
  border: 1px solid #279cff;
  position: absolute;
  left: 355px;
  top: 220px;
}
.mktipbox {
  display: flex;
  flex-direction: column;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 9999;
}
.mktiptile {
  width: 760px;
  height: 80px;
  border-radius: 10px 10px 0px 0px;
  background-color: #425e7c;
  font-size: 30px;
  color: #ffffff;
  padding-left: 30px;
  box-sizing: border-box;
  line-height: 80px;
}
.mktipmain {
  width: 760px;
  height: 280px;
  border-radius: 0px 0px 10px 10px;
  background: linear-gradient(317deg, #bec8d4 0%, #f1f7ff 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.mktipitem1 {
  font-size: 30px;
  color: #171f27;
  line-height: 28px;
}
.mktipitem2 {
  font-size: 26px;
  color: #269bff;
  line-height: 28px;
  margin: 25px 0;
}
.closexzmk {
  width: 54px;
  height: 56px;
  position: absolute;
  right: -25px;
  top: -25px;
  cursor: pointer;
}
</style>
